<template>
  <div class="categories-index">
    <div class="categories-content">
      <h1>Categories</h1>
      <el-button type="primary" @click="dialogFormVisible = true">Button</el-button>
      <el-dialog v-model="dialogFormVisible" title="Add Category">
        <el-form :model="form" label-position="top">
          <el-form-item label="title" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="Input text" />
          </el-form-item>
          <el-form-item label="title" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false" style="border: none; color: rgba(30, 94, 255, 1)">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" style="background-color: rgba(30, 94, 255, 1); border-radius: 0.25rem">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div class="content-box" ref="contentBoxRef">
      <div class="grid-container">
        <div v-for="(item, index) in items" :key="index" class="content">
          <div class="content-img">
            <img :src="item.image" alt="" />
          </div>
          <div class="content-bottom">
            <div class="content-bottom-span">
              <span>{{ item.category }}</span>
            </div>
            <div class="content-bottom-p">
              <p>{{ item.quantity }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import _ from 'lodash'
  const items = []

  import { reactive, ref } from 'vue'

  import { ElMessageBox } from 'element-plus'
  const dialogFormVisible = ref(false)
  const form = reactive({
    name: ``,
    region: ``,
    date1: ``,
    date2: ``,
    delivery: false,
    type: [],
    resource: ``,
    desc: ``,
  })
  const dialogVisible = ref(false)
  for (let i = 1; i <= 9; i++) {
    const id = i
    const image = `https://img.js.design/assets/img/6087bfc0db7c5ee7e960f756.png`
    const category = `Men Clothes`
    const quantity = i + 0

    items.push({ id, image, category, quantity })
  }

  console.log(`items`, items)

  const handleClose = () => {
    ElMessageBox.confirm(`Are you sure to close this dialog?`)
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
  }
</script>
<style lang="scss" scoped>
  .categories-index {
    height: 100%;
    overflow: auto;

    .categories-content {
      height: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      margin-top: 0.5rem;
    }

    .content-box {
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 根据需要调整列数 */
        gap: 0.5rem; /* 根据需要调整列之间的间距 */
      }

      .content {
        border-radius: 0.25rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);

        .content-img {
          height: 18rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .content-bottom {
          margin: 1rem;
        }
      }
    }
  }
</style>
